<template>
 <div class="box1 book1_box">
   <div class="tab1">
          <div class="tab1_head">分类</div>
          <div v-for="sort in list_fenlei" :key="sort" class="tab1_list">
          <router-link style="color:#A9745B"  :to="{ path: '/book_list', query: { id:sort.categoriesId,name:sort.classname}}">
        {{sort.classname}}
          </router-link>
          </div>
        </div>
 </div>
</template>

<script>
import axios from "axios";
   export default {
    data() {
      return {
        isCollapse: true,
        list_fenlei:[]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        // good_fenlei();
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }, 
      good_fenlei(){
        axios.get("http://localhost:8081/fl-categories/getAllCategories",{
          params:{
           categoriesId:4
          }
        }).then((res)=>{
          console.log(res.data.data);
          console.log("dsd")
          this.list_fenlei=res.data.data;
          console.log(this.list_fenlei);
        })
      },
      
    },
    created(){
     this.good_fenlei();
    }
   
  }
</script>

<style>
 .box1{
   background: #F4F4F4;
    width: 208px;
    margin-left: 320px;
  }
  .book1_box{
    height: 400px;
   
  }
 .tab1{
    width: 100px;
    /*height: 420px;*/
 
  }
 .tab1_head{

    padding-left: 5px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    background-color: #f3f0e9;
    margin: 1px 0px;
    text-align: center;
  }
.tab1_list{
    padding-left: 5px;
    width:200px;
    height: 30px;
    line-height: 30px;
    font-family: '幼园';
   
    margin: 1px 0px;
    text-align: center;
  }
  router-link{
    color: #A9745B;
  }
  .tab1_list:hover{
    background-color: #a0a9b1;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100px;
    min-height: 400px;
    margin-left: 250px;
    
  }
  .el-menu-vertical-demo{
    width: 200px;
    margin-left: -60px;
    line-height:10px;
    height: 380px;
  }
</style>